@@include('include/header.html',{"name": "justify","desc": "两端对齐"})

<section id="justify">
    <div class="demo-item">
        <p class="demo-desc">text-align:justify两端对齐</p>
        <div class="demo-block">  
            <div>
                <p class="demo-desc">一行</p>
                <ul  class="ui-justify ui-whitespace">
                    <li><div class="test-img"></div><p>xxx</p></li>
                    <li><div class="test-img"></div><p>xxx</p></li>
                    <li><div class="test-img"></div><p>xxx</p></li>
                    <li><div class="test-img"></div><p>xxx</p></li>
                </ul>
                <p class="demo-desc">多行</p>
                <ul  class="ui-justify ui-whitespace">
                    <li><div class="test-img"></div><p>xxx</p></li>
                    <li><div class="test-img"></div><p>xxx</p></li>
                    <li><div class="test-img"></div><p>xxx</p></li>
                    <li><div class="test-img"></div><p>xxx</p></li>
                    <li><div class="test-img"></div><p>xxx</p></li>
                    <li><div class="test-img"></div><p>xxx</p></li>
                    <li><div class="test-img"></div><p>xxx</p></li>
                    <li><div class="test-img"></div><p>xxx</p></li>
                    <li><div class="test-img"></div><p>xxx</p></li>
                    <li><div class="test-img"></div><p>xxx</p></li>
                    <li><div class="test-img"></div><p>xxx</p></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">弹性布局</p>
        <div class="demo-block">
            <ul class="ui-justify-flex ui-whitespace">
                <li class="test-img"></li>
                <li class="test-img"></li>
                <li class="test-img"></li>
                <li class="test-img"></li>
            </ul>
        </div>
    </div>
</section>

@@include('include/footer.html')